<template>
    <div class="hello">
        <div>
            <h1 v-once>{{ msg }}</h1>
            <button @click.prevent="changeMsg">点击改变msg的值</button>
        </div>
        <div>
            <h1 :class="{red:isRed}" v-bind:title="tip">v-bind:attr|class 简写 :attr|class 绑定标签属性</h1>
            <button v-bind:disabled="disabled">Button</button>
            <button @click.prevent="changeTip">点击改变tip的值</button>
            <button @click.prevent="changeRed">点击改变字体颜色</button>
        </div>
        <div>
            <h1>[]绑定属性值</h1>
            <a v-bind:[attr.attributeName]="attr.url"> 百度 </a>
            <button v-on:[event.eventName]="doClick"> {{event.tip}}</button>
        </div>
        <div>
            <h1>v-on 简写 @ 绑定事件</h1>
            <button v-on:click.prevent="doClick"> {{event.tip}}</button>
            <button @click.prevent="doClick"> {{event.tip}}</button>
        </div>
        <div>
            <h1 v-if="show">v-if 显示与隐藏 会销毁和重建</h1>
            <h1 v-else>v-else 显示与隐藏</h1>
            <h1 v-show="show">v-show 显示与隐藏 元素总是会被渲染，并且只是简单地基于 CSS 进行切换</h1>
            <button @click.prevent="hiden">显示与隐藏</button>
        </div>
        <div>
            <h1>v-for循环</h1>
            <ul>
                <li :key="index" :user="user" v-for="(user,index) in data">
                    <span>下标：{{index}}</span><span>--ID：{{user.id}}</span><span>--姓名：{{user.name}}</span><span>--年龄：{{user.age}}</span>{{user}}
                </li>
            </ul>
            <button @click.prevent="add">添加数据</button>
        </div>
        <div>
            <h1>v-model 双向绑定</h1>
            输入值：<input type="text" v-model="bind">
            获取data中的值{{bind}}
        </div>
        <div>
            <h1>v-html 显示html代码</h1>
            <div>{{html}}</div>
            <div v-html="html"></div>

        </div>
        <div>
            <h1 :class="{red:isRed,bigSize:bigSize}" id="life">生命周期函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed</h1>
            <button @click="changeSize">改变字体大小</button>
        </div>
        <div>
            <h1>计算属性 computed</h1>
            <div><span>原值{{info}} 计算属性{{computeInfo}}</span></div>
            <div>
                <input type="text" v-model="user.firstName">
                <input type="text" v-model="user.lastName">
                <input type="text" v-model="fullName">
            </div>
        </div>
        <div>
            <h1>使用相同标签元素</h1>
            <div v-if="inputMsg%3===0">
                姓名<input placeholder="Enter your username">
            </div>
            <div v-else-if="inputMsg%3===1">
                邮箱<input placeholder="Enter your email">
            </div>
            <div v-else>
                密码<input placeholder="Enter your password">
            </div>
            <h1>使用不同标签元素</h1>
            <div v-if="inputMsg%3===0">
                姓名<input key="username-input" placeholder="Enter your username">
            </div>
            <div v-else-if="inputMsg%3===1">
                邮箱<input key="email-input" placeholder="Enter your email">
            </div>
            <div v-else>
                密码<input key="password-input" placeholder="Enter your password">
            </div>
            <button @click.prevent="addNum">点击切换</button>
        </div>
        <div>
            <h1>v-on 事件修饰符</h1>
            <div><span>.stop阻止单击事件继续传播</span></div>
            <div><span>.prevent阻止标签的默认行为</span></div>
            <div><span>.once 事件只执行一次</span></div>
            <div><span>.capture 内部元素触发的事件先在此处理，然后才交由内部元素进行处理</span></div>
            <div><span>.self  只当在 event.target 是当前元素自身时触发处理函数</span></div>
        </div>
        <div>
            <h1>v-on 按键修饰符</h1>
            <div> enter tab delete esc space up down left right</div>
        </div>
        <div>
            <h1>.once 点击事件只执行一次</h1>
            <button @click.once="doOnce"> 点击</button>
        </div>
        <div>
            <h1>.enter 敲回车</h1>
            <input @keyup.enter="doEnter" type="text" v-model="enter">
        </div>
        <div>
            <h1>有且只有 Ctrl 被按下的时候点击后才触发</h1>
            <button v-on:click.ctrl.exact="ctrlClick">点击</button>
        </div>
        <div>
            <h1>自动过滤用户输入的首尾空白字符</h1>
            <input v-model.trim="trimMsg">
            <button v-on:click="showTrimMsg">点击</button>
        </div>

    </div>
</template>

<script>
    export default {
        name: "HelloWorld",
        data() {
            return {
                msg: "{{msg}}显示数据值 v-once 不会改变显示值",
                tip: "v-bind:attr 绑定标签属性",
                disabled: true,
                show: true,
                data: [
                    {
                        id: 1,
                        name: "张三",
                        age: 11
                    },
                    {
                        id: 1,
                        name: "李四",
                        age: 22
                    }
                ],
                bind: "",
                html: "<span>v-html 显示html代码</span>",
                attr: {
                    attributeName: "href",
                    url: "http://www.baidu.com"
                },
                event: {
                    eventName: "click",
                    tip: "点击"
                },
                info: "INFO",
                user: {
                    firstName: "a",
                    lastName: "b"
                },
                isRed: true,
                inputMsg: 0,
                enter: "",
                trimMsg: "",
                bigSize: false,
            }
        },
        methods: {
            changeMsg() {
                this.msg = "显示改变后的msg"
            },
            changeTip() {
                this.tip = "显示改变后的tip"
            },
            changeRed() {
                this.isRed = !this.isRed
            },
            hiden() {
                this.show = !this.show
            },
            add() {
                this.data.push({
                    id: 3,
                    name: "王五",
                    age: 33
                })
                console.log(this.data);
            },
            doClick() {
                this.event.tip = "被点击了" + new Date().getMilliseconds()
            },
            addNum() {
                this.inputMsg = this.inputMsg + 1
            },
            doOnce() {
                alert("被执行了")
            },
            doEnter() {
                alert("按下了enter键,输入值为：" + this.enter)
            },
            ctrlClick() {
                alert("被执行了")
            },
            showTrimMsg() {
                alert("-" + this.trimMsg + "-");
            },
            changeSize() {
                this.bigSize = !this.bigSize;
            },

        },
        //会将计算的结果进行缓存，只要源数据不发生改变，缓存值就不会发生改变
        computed: {
            computeInfo() {
                return this.info.toLowerCase()
            },
            fullName: {
                get: function () {
                    return this.user.firstName + " " + this.user.lastName
                },
                set: function (newValue) {
                    let names = newValue.split(" ")
                    this.user.firstName = names[0]
                    this.user.lastName = names[names.length - 1]
                }
            }
        },
        watch: {
            fullName() {
                console.log("监听 fullName 发生改变");
            }
        },
        beforeCreate() {
            console.log("beforeCreate", "创建之前获取不到属性或方法信息", this.msg, this.add)
        }
        ,
        created() {
            console.log("created", "创建完成获取到属性或方法信息，但获取不到dom元素", this.msg, this.add, document.querySelector("#life"), document.querySelector(".red"))
        }
        ,
        beforeMount() {
            console.log("beforeMount", "渲染开始前获取到属性或方法信息，但获取不到dom元素", this.msg, this.add, document.querySelector("#life"), document.querySelector(".red"))

        }
        ,
        mounted() {
            console.log("mounted", "渲染完成获取到属性或方法信息和dom元素", this.msg, this.add, document.querySelector("#life"), document.querySelector(".red"))
        }
        ,
        beforeUpdate() {
            console.log("beforeUpdate", "数据更新前获取到属性或方法信息和dom元素，但获取不到更新的dom元素", this.msg, this.add, document.querySelector("#life"), document.querySelector(".red"), document.querySelector(".bigSize"))
        }
        ,
        updated() {
            console.log("updated", "数据更新完成获取到属性或方法信息和dom元素，同时获取到更新的dom元素", this.msg, this.add, document.querySelector("#life"), document.querySelector(".red"), document.querySelector(".bigSize"))
        }
        ,
        beforeDestroy() {
            console.log("beforeDestroy")
        }
        ,
        destroyed() {
            console.log("destroyed")
        }
    }
</script>

<style scoped>
    .hello div {
        margin-top: 20px;
    }

    .red {
        color: red;
    }

    .bigSize {
        font-size: 40px;
    }
</style>
